<!--
 * @Author: your name
 * @Date: 2020-04-15 22:52:46
 * @LastEditTime: 2020-04-30 22:59:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\views\home.vue
 -->
<template>
  <div class="home page-exp">
    <page-header></page-header>
    <el-carousel height="540px">
      <el-carousel-item v-for="item in bannersImg" :key="item.id">
        <img :src="config.imgPath + item.photo" alt />
      </el-carousel-item>
    </el-carousel>
    <div class="container">
      <div class="slogan flex-c">
        <h1>专业的课程体系</h1>
        <h2>新运云开启新课程，系统化学习路径</h2>
        <p>让学习有章有序 系统的课程体系 课后专业稳固，培养岗位优秀人才</p>
      </div>
      <div class="slide flex-c">
        <div class="flex-rb tier">
          <div class="classify" v-for="(item, index) in messageList" :key="item.id" @click="goCoursePage(item)">
            <img :src="classifyImg[index] || classifyImg[index - classifyImg.length]" alt />
            <h1>{{ item.name }}</h1>
          </div>
        </div>
      </div>
      <!-- 为什么学这门课 -->
      <div class="whyStudy">
        <div class="content">
          <h1>为什么学这门课</h1>
          <div class="flex-rb">
            <!-- <div class="videoArea">
              <video class="video-js" ref="videoPlayer">
                <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
              </video>
            </div>-->
            <div class="platformBrief">
              <span class="title">新运公司平台介绍</span>
              <p>
                新运公司VR安全培训平台，是集岗前三级培训、安全教育培训、分工种培训为一体的系统化、专业化培训平台，将讲师、学员、教材为一体，进行合理、有计划、有系统的安排，旨在通过一站式、一条龙培训，解决施工现场培训后顾之忧，形成集培训、考试、人员管理为一体的系统化培训平台，切实解决施工现场安全培训难、培训不到位、培训不满足要求等难题。
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 适合人群 -->
      <div class="suitable">
        <div class="content">
          <h1>课程适合人群</h1>
          <div class="flex-rb">
            <div class="flex-c head">
              <img :src="headImg1" alt />
              <p>增强安全质量管理人员业务技能。发挥安全质量监督职能；提升全系统现场安全质量管理能力</p>
            </div>
            <div class="flex-c head">
              <img :src="headImg2" alt />
              <p>熟练掌握特种作业及特殊工种岗位操作技能，规范特种作业及特殊工种人员行为</p>
            </div>
            <div class="flex-c head">
              <img :src="headImg3" alt />
              <p>掌握施工现场操作技能，提升作业人员安全质量意识，规避施工安全质量风险</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 新闻资讯 -->
      <div class="news">
        <div class="content">
          <h1>新闻资讯</h1>
          <div class="flex-rb box">
            <div class="lBox">
              <div class="new" v-for="item in newsList" :key="item.id" @click="goNewDetail(item)">
                <span class="s-txt" :title="item.title">{{ item.title }}</span>
                <span class="time">{{ tool.timeCycle(item.updateTime) }}</span>
              </div>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
      <el-button class="knowMore" round @click="moreNews">了解更多</el-button>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
import { EventBus } from "@/eventBus.js";

export default {
  name: "home",
  components: {
    pageHeader,
    PageFooter,
  },
  data() {
    return {
      bannerImg: require("@/assets/img/home/banner.png"),
      headImg1: require("@/assets/img/home/manager.png"),
      headImg2: require("@/assets/img/home/special.png"),
      headImg3: require("@/assets/img/home/worker.png"),
      classifyImg: [
        require("@/assets/img/home/constructionSite.png"),
        require("@/assets/img/home/engineeringSystem.png"),
        require("@/assets/img/home/laws.png"),
        require("@/assets/img/home/regulatoryFramework.png"),
        require("@/assets/img/home/safetyEducation.png"),
        require("@/assets/img/home/constructionSite.png"),
      ],
      player: null,
      bannersImg: [],
      newsList: [],
      newId: "",
      messageList: [], //资讯分类
      news: {
        pageSize: "6",
        pageIndex: "1",
      },
    };
  },
  mounted() {
    this.getBanner();
    this.getNewsId();
    this.getMessageList();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    getBanner() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/banner/selectAllBanner",
          method: "post",
          headers: {
            appId: "appid-xinyun-0003",
            sign: that.tool.sign("/wisdomlearn/banner/selectAllBanner", time),
            timestamp: time,
          },
          data: {
            parameterType: 2,
          },
        })
        .then((res) => {
          if ("00000" === res.retCode) {
            this.bannersImg = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getNewsId() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/information/selectAllInformationColumn",
          method: "post",
          headers: {
            appId: "appid-xinyun-0003",
            sign: that.tool.sign("/wisdomlearn/information/selectAllInformationColumn", time),
            timestamp: time,
          },
        })
        .then((res) => {
          if (res.retCode == "00000") {
            that.newId = res.data.filter((v) => v.name == "综合新闻")[0].id;
            that.getNewsList(that.newId);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMessageList() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCoursewareColumn",
          method: "post",
          headers: {
            appId: "appid-xinyun-0003",
            sign: that.tool.sign("/wisdomlearn/courseware/selectAllCoursewareColumn", time),
            timestamp: time,
          },
        })
        .then((res) => {
          if (res.retCode == "00000") {
            //
            let newList = [];
            res.data.forEach((elem) => {
              if (elem.name === "三级教育") {
                elem.name = "安全教育";
                newList.push(elem);
              } else if (elem.name === "二级教育") {
                elem.name = "规章制度";
                newList.push(elem);
              } else if (elem.name === "一级教育") {
                elem.name = "专业知识";
                newList.push(elem);
              } else if (elem.name === "红线教育") {
                elem.name = "日常教育";
                newList.push(elem);
              }
            });
            that.messageList = newList;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getNewsList(id) {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/information/selectAllInformation",
          method: "post",
          headers: {
            appId: "appid-xinyun-0003",
            sign: that.tool.sign("/wisdomlearn/information/selectAllInformation", time),
            timestamp: time,
          },
          data: {
            pageSize: that.news.pageSize,
            columnId: id,
            pageIndex: that.news.pageIndex,
          },
        })
        .then((res) => {
          if (res.retCode == "00000") {
            that.newsList = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转-学习课件
    goCoursePage(item) {
      let token = this.config.token;
      if (!token) {
        this.$message({
          message: "您尚未登录，请先登录！",
          type: "error",
        });
        this.$router.push({
          path: "/login",
        });
      } else {
        this.$router.push({
          path: "/courseware/index",
          query: {
            type: item.name,
          },
        });
        // this.$EventBus.$emit('itemName',item.name)
      }
    },
    // 跳转-新闻详情页
    goNewDetail(item) {
      let that = this;
      let token = that.config.token;
      if (!token) {
        that.$message({
          message: "您尚未登录，请先登录！",
          type: "error",
        });
        that.$router.push({
          path: "/login",
        });
      } else {
        that.$router.push({
          path: "/personalcenter/newDetail",
          query: {
            info: JSON.stringify({
              id: item.id,
              page: that.news.pageIndex,
              limit: that.news.pageSize,
            }),
            newId: that.newId, //栏目Id
            title: item.title,
            time: item.updateTime,
          },
        });
      }
    },
    // 跳转-更多新闻列表页
    moreNews() {
      let token = this.config.token;
      if (!token) {
        this.$message({
          message: "您尚未登录，请先登录！",
          type: "error",
        });
        this.$router.push({
          path: "/login",
        });
      } else {
        this.$router.push({
          path: "/personalcenter/newList",
          query: {
            newId: this.newId,
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.container {
  min-width: 1200px;
  flex: 1;
}
.container .bgPicture {
  width: 100%;
}
.container .slogan {
  width: 100%;
  height: 200px;
  justify-content: space-evenly;
}
.container .slogan h1 {
  font-size: 48px;
  color: #18181b;
  letter-spacing: 0.19px;
}
.container .slogan h2 {
  font-size: 36px;
  color: #191a1d;
  letter-spacing: 0.14px;
}
.container .slogan p {
  font-size: 21px;
  color: #999999;
  letter-spacing: 0.08px;
}
.slide {
  width: 100%;
  background: #f3f3f3;
  padding: 20px 0;
}
.slide .tier {
  width: 1200px;
  margin: 0 auto;
  flex-flow: wrap;
}
.slide .tierSecond {
  width: 1200px;
  margin: 0 auto;
}
.slide .tier .classify {
  width: 49.7%;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}
.slide .tier .classify:last-child,
.slide .tier .classify:nth-last-child(2) {
  margin-bottom: 0;
}
.slide .tier img {
  width: 100%;
}
.slide .classify h1 {
  position: absolute;
  top: 58px;
  left: 48px;
  font-size: 30px;
  color: #eceef2;
  letter-spacing: 0.12px;
}
.slide .classify p {
  position: absolute;
  top: 113px;
  left: 48px;
  font-size: 16px;
  color: #f1f2f6;
  letter-spacing: 0.06px;
}
.slide .classify p:last-child {
  top: 139px;
}
.slide .tierSecond .classify {
  width: 33%;
  position: relative;
}
.slide .tierSecond img {
  width: 100%;
}
.slide img {
  height: 215px;
}
/* 为什么学这门课  */
.whyStudy .content {
  width: 1200px;
  margin: 0 auto;
}
.whyStudy .content h1 {
  text-align: center;
  margin: 100px auto 55px;
  font-size: 48px;
  color: #171819;
  letter-spacing: -1.81px;
}
.videoArea {
  width: 48%;
}
.platformBrief {
  width: 100%;
}
.platformBrief .title {
  font-size: 36px;
  color: #1b1d23;
  letter-spacing: 0.14px;
}
.platformBrief p {
  margin-top: 50px;
  font-size: 21px;
  color: #949494;
  letter-spacing: 0.08px;
  line-height: 39px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
/* 适合人群 */
.suitable .content {
  width: 1200px;
  margin: 0 auto;
}
.suitable .content h1 {
  text-align: center;
  margin: 100px auto 55px;
  font-size: 48px;
  color: #18181b;
  letter-spacing: -1.81px;
}
.suitable .head {
  width: 260px;
}
.suitable .head p {
  margin-top: 30px;
  font-size: 18px;
  color: #1b1d23;
  letter-spacing: -0.68px;
  line-height: 31px;
  text-align: center;
}
/* 新闻资讯 */
.news .content {
  width: 1200px;
  margin: 0 auto;
}
.news .content h1 {
  text-align: center;
  margin: 100px auto;
  font-size: 48px;
  color: #18181b;
  letter-spacing: -1.81px;
}
.news .box {
  align-items: flex-start;
}
.news .lBox {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.lBox .line {
  height: 100%;
  width: 2px;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 50%;
  background: #d4d2d2;
}
.news .new {
  width: 48%;
  display: flex;
  justify-content: space-between;
}
.news .new:hover span {
  color: #409eff !important;
  cursor: pointer;
}
.news .new:first-child {
  margin-top: 0;
}
.news .new span {
  font-size: 20px;
  color: #161718;
  letter-spacing: 0.09px;
  line-height: 44px;
}
.news .new span:first-child {
  width: 70%;
}
.news .new .time {
  font-size: 16px;
  color: #676767;
  letter-spacing: 0.07px;
}
.knowMore {
  display: flex;
  margin: 30px auto;
}
.head img {
  width: 100px;
  height: 200px;
}
</style>
<style>
.home .el-carousel {
  min-width: 1200px;
}
.home .el-carousel img {
  height: 540px;
  width: 100%;
}
</style>
